<template>
	<view>
		<view> <u-navbar title='壹零农场' :autoBack="true"></u-navbar> </view>
		<view class="contount">
			<view class="bg1">
				<view class="seaech">
					<u-search :height="50" shape="round"></u-search>
				</view>
				<view class="swipper">
					<!-- 	<u-swiper :list="list4" :height="400" previousMargin="30" nextMargin="30" circular :autoplay="false"
					radius="5" bgColor="#ffffff"></u-swiper> -->
					<u-swiper :height="350" :list="list4"></u-swiper>
				</view>
			</view>


			<!-- <navigator class="addFarmland" url="../../subpkg/addFarmland/addFarmland">添加</navigator> -->
			<!-- 功能banner -->
			<view class="farmlandstate">
				<view class="left" v-for="item in countentBanner">
					<image :src="item.path" mode=""></image>
					<text class="name">{{item.name}}</text>
				</view>
			</view>
			<!-- 标题 -->
			<view class="title">
				<text>认养新品</text>
				<uni-icons type="tune-filled" color="#76877c" size="20" class="icon"></uni-icons>
			</view>
			<!-- 认养新品 -->
			<view class="shidu-list">
				<view class="shidu-item" v-for="(item, index) in adoptionListData">
					<image :src="item.path" mode=""></image>
					<view class="content">
						<view class="value">
							<text class="name">{{ item.goodsName }}</text>
							<u-tag :text="`第${item.number}期`" style="width: 46px;" plain size="mini"
								type="success"></u-tag>
							<text class="money">{{ item.money}}</text>
							<text class="unit">{{ item.unit}}</text>
						</view>
						<view class="timeSchedule">
							<text class="time">{{ item.time }}</text>
							<u-line-progress height="35" :percentage="item.percentage"
								activeColor="#84a775"></u-line-progress>
						</view>
						<view class="goodsInfo">
							<view class="goods">
								<text class="breed">品种</text>
								<text class="breedName">{{ item.breed }}</text>
							</view>
							<view class="goods">
								<text class="breed">周期</text>
								<text class="breedName">{{ item.cycle }}</text>
							</view>
							<view class="goods">
								<text class="breed">产量</text>
								<text class="breedName">{{ item.production }}</text>
							</view>

						</view>
					</view>
				</view>
			</view>

			<Tabar></Tabar>
		</view>
	</view>
</template>

<script>
	import {
		v4
	} from 'uuid';
	import Tabar from '@/pages/componment/tabar.vue'
	
	export default {
		components: {
			Tabar
		},
		data() {
			return {
				list4: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				countentBanner: [{
					path: "../../static/images/index/004.png",
					name: "认养",
					key: 'renyang'
				}, {
					path: "../../static/images/index/001.png",
					name: "优选",
					key: 'youxuan'
				}, {
					path: "../../static/images/index/002.png",
					name: "活动",
					key: 'huodong'
				}, {
					path: "../../static/images/index/003.png",
					name: "共建",
					key: 'gongjian'
				}, ],
				adoptionListData: [{
					path: '../../static/images/index/chicken.jpg',
					goodsName: "密云本地溜达鸡",
					number: 1,
					money: '150',
					time: '2023/07/01-2023/12/30',
					breed: '北京油鸡',
					cycle: '365',
					unit: '元/只',
					percentage: 36,
					production: '2kg/只',
				}, {
					path: '../../static/images/index/tomato.jpg',
					goodsName: "顺义精品大棚番茄",
					number: 1,
					money: '375',
					unit: '元/斤',
					time: '2023/07/01-2023/12/30',
					breed: '传奇,樱桃....',
					cycle: '30-60天',
					percentage: 60,
					production: '15kg+'
				}],
			}
		},
		created() {

		},
		onLoad() {

		},
		mounted() {},

	}
</script>

<style lang="less">
	.contount {
		margin-top: 88px;
	}

	.seaech {
		margin: 0 auto;
		padding-top: 20rpx;
		margin-bottom: 10rpx;
		width: 95vw;
	}

	.swipper {
		width: 95vw;
		margin: 0 auto;
		top: 300rpx;
		right: 0;
		padding-top: 10rpx;
	}

	.bg1 {
		width: 100%;
		height: 560rpx;
		background-color: #6f994c;
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
	}




	.farmlandstate {
		box-sizing: border-box;
		padding: 0 10rpx;
		width: 95vw;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0 1px 0 0 rgba(150, 150, 150, .2);
		display: flex;
		align-items: flex-start;
		text-align: center;
		margin-top: -50px;
		;

		.left {
			image {
				width: 50px;
				margin: 0 auto;
			}

			.name {
				font-weight: 600;
				font-size: 27rpx;
			}

			display: flex;
			flex-direction: column;
			width: 150rpx;
			height: 120rpx;
			margin-right: 30rpx;
			padding: 10px
		}


	}

	.title {
		position: relative;
		margin-top: 25rpx;
		margin-left: 50rpx;
		font-size: 37rpx;
		font-weight: 800;

		text {
			margin-right: 10rpx;
		}

		.icon {
			position: absolute;
			top: 0rpx;
		}
	}

	.shidu-list {


		.shidu-item {
			display: flex;
			padding: 20rpx 10px;
			background-color: #eaf3eb;
			margin-bottom: 10px;
			border-radius: 10rpx;

			image {
				width: 140px;
				height: 109px;
				border-radius: 10rpx;

			}

			.content {
				width: 100%;
				padding: 0 10px;

				.goodsInfo {
					display: flex;
					justify-content: space-between;

					.goods {
						.breed {
							text-align: center;
							color: #a1a1a0;
							font-size: 14px;
							display: block;
						}

						.breedName {
							font-size: 14px;
						}
					}
				}

				.timeSchedule {
					.time {
						color: #a1a1a0;
						font-size: 14px;
					}
				}

				.value {
					display: flex;
					justify-content: flex-start;

					.name {
						font-size: 14px;
						font-weight: 600;
						margin-right: 5px
					}

					.money {
						color: firebrick;
						font-size: 24px;
						margin-left: 5px;
						font-weight: 800
					}

					.unit {
						font-size: 12px;
						line-height: 12px;
						padding-top: 6px;
					}
				}
			}
		}
	}

	.light-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 0 19rpx;

		.light-item {
			display: flex;
			align-items: center;
			width: 44%;
			height: 160rpx;
			background-color: #FFFFFF;
			margin-bottom: 42rpx;
			border-radius: 15rpx;
			box-shadow: 0 1px 0px 0px rgba(150, 150, 150, .1);

			.left [class^=icon] {
				width: 90rpx;
				height: 90rpx;
				margin: 0 30rpx 0 30rpx;

				&.icon1,
				&.icon3 {
					width: 85rpx;
					height: 85rpx;
				}

				&.icon2 {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: column;

				[class ^=value] {
					font-size: 45rpx;
					color: #66c3a9;

					&.value3 {
						font-size: 39rpx;
					}
				}

				.name {
					font-size: 30rpx;
					color: #697b6f;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>